import React from 'react';
import { Modal, InputNumber } from 'antd';
import { connect } from 'umi';
import { configModal, warnSmall } from '@/assets';
import { NumberSub } from '@/utils';

import styles from './index.less';

function ModelStepSetting({ echartsBenefitStep, dispatch }, ref) {
  React.useImperativeHandle(ref, () => ({
    initHandle,
  }));

  const [showModal, setShowModal] = React.useState(false),
    [step, setStep] = React.useState(echartsBenefitStep);

  const initHandle = () => {
    setShowModal(true);
  };

  const confirm = () => {
    dispatch({
      type: 'dayRollingTradeStragety/setEchartsBenefitStep',
      payload: step,
    });
    setShowModal(false);
  };

  return (
    <Modal
      className={styles.modelStepSetting}
      centered={true}
      title={
        <div className={styles.modalTitle}>
          <img src={configModal} />
          <span className={styles.text}>模型精度配置</span>
        </div>
      }
      visible={showModal}
      okText="提交"
      onCancel={() => {
        setShowModal(false);
      }}
      onOk={confirm}
    >
      <div className={styles.modelStep}>
        <span className={styles.label}>模型精度</span>
        <InputNumber
          className={styles.input}
          precision={0}
          value={step}
          onBlur={(e) => {
            let value = e.target.value;
            if (value === '' || !/^[-]?[\.\d]+$/.test(value)) return;
            let max = 500;
            let min = 100;
            if (value > max) {
              value = max;
            } else if (value < min) {
              value = min;
            }
            value = NumberSub(value, 0);
            setStep(value);
          }}
        />
      </div>
      <div className={styles.tipMessage}>
        <img className={styles.icon} src={warnSmall} />
        <span className={styles.text}>请在100-500内调整，精度越高加载速度越慢</span>
      </div>
    </Modal>
  );
}

export default connect(
  ({ dayRollingTradeStragety }) => ({
    echartsBenefitStep: dayRollingTradeStragety.echartsBenefitStep,
  }),
  null,
  null,
  { forwardRef: true },
)(React.forwardRef(ModelStepSetting));
